<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />

    <span>
      搜索：
      <el-input style="width:15rem" placeholder="菜单标题" @input="search" v-model="title"></el-input>
    </span>
    <el-button type="primary" icon="el-icon-plus" @click="dialog = true; isAdd=true">添加</el-button>

    <el-divider></el-divider>
    <el-table
    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    style="width: 100%"
    class="table"
    height="600"
    >
      <el-table-column prop="menu_name" label="菜单标题"></el-table-column>
      <el-table-column prop="menu_url" label="索引"></el-table-column>
      <el-table-column prop="menu_icon" label="图标"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-delete"
            @click="remove(scope.$index, tableData)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10,12,tableData.length]"
      :page-size="pagesize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="tableData.length"
    ></el-pagination>

    <el-dialog title="菜单信息" :visible.sync="dialog" width="30%">
      <el-form :model="menuForm" ref="menuForm" label-width="130px">
        <el-form-item
          label="菜单标题"
          prop="menu_name"
          :rules="[{ required: true, message: '请输入菜单标题'}]"
        >
          <el-input style="width:20rem" v-model="menuForm.menu_name" autocomplete="off"></el-input>
        </el-form-item>
        <br />
        <el-form-item
          label="索引"
          prop="menu_url"
          :rules="[{ required: true, message: '请输入菜单索引'}]"
        >
          <el-input style="width:20rem" v-model="menuForm.menu_url" autocomplete="off"></el-input>
        </el-form-item>
        <br />
        <el-form-item
          label="图标"
          prop="menu_icon"
          :rules="[{ required: true, message: '请输入菜单图标名'}]"
        >
          <el-input style="width:20rem" v-model="menuForm.menu_icon" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('menuForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('menuForm')">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      currentPage: 1, //默认页码为1
      pagesize: 10, //默认一页显示11条
      dialog: false,
      tableData: [],
      table: [],
      isAdd: false,
      menuForm: {
        menu_id: "",
        menu_name: "",
        menu_icon: "",
        menu_url: ""
      }
    };
  },
  mounted() {
    this.getData().then(r => {
      this.table = this.tableData;
    });
  },
  methods: {
    handleSizeChange(size) {
      //一页显示多少条
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      //页码更改方法
      this.currentPage = currentPage;
    },
    search() {
      this.tableData = this.table.filter(e => e.menu_name.match(this.title));
    },
    async getData() {
      await this.$post("/menu/getAllMenuList", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        if (res.code === 504) {
          this.$message.warning(res.message);
          return;
        }
        if (res.code === 200) {
          this.tableData = res.data;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.isAdd) {
            this.$post("/menu/updateMenuInfo", {
              user_id: sessionStorage.getItem("user_id"),
              menu_id: this.menuForm.menu_id,
              menu_name: this.menuForm.menu_name
            }).then(res => {
              if (res.code == 504) {
                this.$message.warning(res.message);
                return;
              }
              if (res.code == 200) {
                this.$message.success(res.message);
                this.getData();
              }
            });
            this.menuForm = {
              menu_id: "",
              menu_name: "",
              menu_icon: "",
              menu_url: ""
            };
          }
          if (this.isAdd) {
            this.isAdd = false;
            this.tableData.push(this.menuForm);
            this.menuForm = {
              menu_id: "",
              menu_name: "",
              menu_icon: "",
              menu_url: ""
            };
          }

          this.dialog = false;
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.menuForm = {
        menu_id: "",
        menu_name: "",
        menu_icon: "",
        menu_url: ""
      };
      this.dialog = false;
    },
    edit(row) {
      let temp = {
        menu_id: row.menu_id,
        menu_name: row.menu_name,
        menu_icon: row.menu_icon,
        menu_url: row.menu_url
      };
      this.menuForm = temp;
      this.dialog = true;
    },
    remove(index, rows) {
      index = index + this.pagesize*(this.currentPage-1);
      rows.splice(index, 1);
      this.$message.success("删除成功");
    }
  }
};
</script>

<style scoped>
.form-div {
  margin-left: 3rem;
  height: 50rem;
}
.add-user-form {
  margin-top: 5rem;
}
.user-form-button {
  margin-top: 3rem;
  margin-left: 10rem;
}
.table >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}
.table >>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}
.table >>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1598ec;
}
.radio >>> .el-radio__input.is-checked .el-radio__inner {
  border-color: #1598ec;
  background: #1598ec;
}
.radio >>> .el-radio__input.is-checked + .el-radio__label {
  color: #1598ec;
}
</style>
